<!--  -->
<template>
  <div class>
    <Head></Head>
     <titlemeta></titlemeta>
    <div class="section">
      <!-- <div class="rise">
        <div class="listName">全部</div>
        <div v-for="(item,index) in list" :key="index" class="listName">{{item.typeName}}</div>
      </div>-->

      <!-- <div class="project_list">
        <div v-for="(res,key) in projectList" :key="key" class="project_list_one">
          <img :src="res.serviceUrl" alt class="project_list_one_img" />
          <p class="project_list_name">{{res.contentName}}</p>
          <p class="project_list_content">{{res.contentInfo}}</p>
        </div>
      </div>-->

      <div class="content">
        <div class="navContent" v-if='display'>
          <div class="navContent_list_title">
            <div class="navContent_list_name">项目</div>
            <!-- <div class="navContent_list_type">类型</div> -->
            <div class="navContent_list_time">时间</div>
          </div>
          <div
            v-for="(item,index) in projectList"
            :key="index"
            class="navContent_list"
            @click="change(item)"
          >
            <div class="navContent_list_name">>{{item.contentName}}</div>
            <!-- <div class="navContent_list_type">商品</div> -->
            <div class="navContent_list_time">{{item.createTime | dataTime}}</div>
          </div>
        </div>
        <div v-if='!display' class="navContent nodata">
                    暂无数据
        </div>
      </div>

      <div class="page" v-if='display'>
        <Page :total="total" @on-change="changeVal" :page-size="title.pageSize" class="page"/>
      </div>
    </div>
    <Foot></Foot>
    <lefINvitation class="leftNvit" ref="lefINvitation" @buttop="buttop"></lefINvitation>
    <nightNvitation class="nightNvit" v-if="!mobilePc"></nightNvitation>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import { serviceTypeAll, searchService } from "../../api/info";
import titlemeta from '../../components/titlemeta'
import {clieentWidth} from '../../utils/clientwidth'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    titlemeta
  },
  data() {
    //这里存放数据
    return {
       mobilePc:false,
      display:true,
      total: 0,
      title: {
        pageSize: 10,
        currentPage: 1,
        params: {
         
          keyWords: ""
        }
      },

      list: [],
      projectList: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route(to, from) {
      this.$router.go(0);
    }
  },
  //方法集合
  methods: {
    // 列表分类
    getserviceTypeAll() {
      serviceTypeAll().then(res => {
        this.list = res.data;
      });
    },
    // 分页
    changeVal(val) {
      this.title.currentPage = val;
      this.getsearchService();
    },
    // 获取项目列表
    getsearchService() {
      searchService(this.title).then(res => {
        if (res.code == "0000") {
          this.projectList = res.data.list;
          this.total = res.data.totalCount;
        }else{
            this.display = false
        }
      });
    },
    // 详情
    change(item) {
            this.$router.push({ path: "/contentInfo", query: { id: item.id } });
    },
    // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    },
              ismobilePc(){
      if(clieentWidth()){
        this.mobilePc = true
      }else{
        this.mobilePc = false
      }
    }
    // getQuery() {
    //   // this.title.key = this.$route.query.serach;
    //   this.title.params.serviceId = this.$route.query.type;
    //   this.getserviceTypeAll();
    //   this.getsearchService();
    // }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.title.params.keyWords = this.$route.query.serach;
    this.getserviceTypeAll();
    this.getsearchService();
    this.ismobilePc()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../assets/nvit.scss");
.rise {
  width: 67%;
  margin: auto;
  padding: 0.2rem 0;
  display: flex;
  // border: 1px solid red;
  // background-color: rgba(255, 255, 255, 1);
}
.listName {
  padding: 0.05rem 0.25rem;
  margin-right: 0.05rem;
  font-size: 0.14rem;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(99, 99, 99, 1);
  background-color: white;
  cursor: pointer;
}
.rise > div:nth-child(1) {
  background-color: rgba(0, 0, 0, 0.164);
  color: white;
}
.section {
  background: rgba(147, 146, 146, 0.057);
}
.project_list {
  width: 67%;
  margin: auto;
  padding: 0.3rem 0;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // background: rgba(147, 146, 146, 0.057);
  background: rgba(147, 146, 146, 0.02);
}
.project_list_one {
  width: 23%;
  margin-right: 1.5%;
  margin-bottom: 0.39rem;
  cursor: pointer;
}
.project_list_one_img {
  width: 100%;
  height: 1.8rem;
}
.project_list_name {
  padding: 0.1rem;
  font-size: 0.19rem;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  background-color: white;
  border-bottom: 1px solid rgba(147, 146, 146, 0.057);
}
.project_list_content {
  padding: 0.05rem;
  font-size: 0.14rem;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(147, 146, 146, 1);
  background-color: white;
}
.page {
  margin: auto;
  padding: 1rem 0 1rem;
  text-align: center;
}
.content {
  background-color: rgba(240, 240, 240, 1);
  padding: 1.5rem 0 1rem;
}
.navContent {
  width: 67%;
  // border-bottom: 1px solid rgba(54, 54, 54, 0.137);
  //   padding: 10px 0;
  margin: auto;
  // text-align: center;
  background-color: white;
  font-size: 0.16rem;
  //   text-align: center;
}
.nodata{
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 3rem;
}
.navContent_list_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
  padding: 0.1rem 0.2rem;
  background-color: rgba(54, 54, 54, 0.137);
}
.navContent_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
  padding: 0.1rem 0.2rem;
  border-bottom: 1px solid rgba(54, 54, 54, 0.137);
  cursor: pointer;
}
.navContent_list_name {
  width: 70%;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navContent_list_type {
  text-align: center;
  width: 10%;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navContent_list_time {
  text-align: center;
  width: 20%;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navContent_env {
  font-size: 0.3rem;
  color: #333;
  text-align: center;
}
@media screen and (max-width: 780px){
  .navContent {
  width: 80%;
  }
    .navContent{
      font-size: 1rem;
    }
    .navContent_list{
      padding: 0.5rem 0;
    }
}
</style>